* {
    margin: 0;
    padding: 0;
}

/* 1.准备一个div盒子box，设置海报背景图片  */
.box {
    width: 1366px;
    height: 600px;
    background: url('./images/bg.jpg');
    overflow: hidden;
    position: relative;
}

/* 2.准备2个600高的div盒子left,right，宽度是box的一半，分别设置背景图片*/
.left,
.right {
    /* 3.让left,right盒子左右排列，组成一张完整的覆盖图 */
    /* float: left; */
    position: absolute;
    height: 600px;
    width: 50%;
    background: url(./images/fm.jpg);
    transition: all 1s;
}

.left {
    left: 0;
}

.right {
    background-position: right;
    right: 0;
}

/* 4.鼠标进入box盒子时让left,right盒子分别向左右移动，产生开门效果 */
.box:hover .left {
    transform: translate(-100%);
    /* left: -683px; */
}

.box:hover .right {
    transform: translate(100%);
    /* right: -683px; */
}